<!-- 首页》左侧-->
<template>
    <div class="home-cards-cont">
        <template v-for="(item, index) in leftCardGroups">
            <div
                class="card-group"
                :key="index"
                :is="item.id"
                @isOpenUnitList="isOpenUnitList"
                @isOpenSaftyList="isOpenSaftyList"
                :currentSaftyStatus="currentSaftyStatus"
                :style="{height:item.height}" 
            ></div>
        </template>
    </div>
</template>

<script>
import CardLogo from "@/components/Cards/CardLogo"; //头部logo
import CardUnitNum from "@/components/Cards/CardUnitNum"; //接入单位
import CardKeyIndex from "@/components/Cards/CardKeyIndex"; //核心指标
import CardSafetyIndexRanking from "@/components/Cards/CardSafetyIndexRanking"; //安全指数排名
import CardEquipNum from "@/components/Cards/CardEquipNum"; //设备统计

export default {
    name: "HomeCards",
    components: {
        CardLogo,
        CardUnitNum,
        CardKeyIndex,
        CardSafetyIndexRanking,
        CardEquipNum,
    },
    data() {
        return {
            allComponents: [],
            componentName: "",
            loading: false,
            leftCardGroups: this.bsConfig.LeftMenu.cards,
            currentSaftyStatus:null,
        };
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
        /**
         * @Author: Chili
         * @Description: 接入单位展开
         * @Date: 2019-07-13 14:26:48
         */
        isOpenUnitList: function(newArr) {
            let self = this;
            self.leftCardGroups = newArr;
          
        },
        /**
         * @Author: Chili
         * @Description: 安全指数排名展开
         * @Date: 2019-07-12 16:48:30
         */
        isOpenSaftyList: function(newArr, status) {
            let self = this;
            self.currentSaftyStatus = status;
            self.leftCardGroups = newArr;
        },
    }
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    .home-cards-cont{
        width: 100%;
        height: 100%;
        .card-group{
            overflow: hidden;
        }
    }
</style>
